<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>南京智慧环保</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/public.css">
	<link rel="stylesheet" type="text/css" href="assets/js/need/layer.css">
	<style>
		body{
			background: url(assets/img/bg-img.png) repeat-x;
			width: 100%;
			height: 100%;
			background-size: 100% 100%;
		}
		.body-top{
			height: 2rem;
			background: #fff;
			width: 100%;
		}
		.body-top .top-content{
			width: 1000px;
			margin: 0 auto;
			overflow: hidden;
		}
		.body-top .top-content .logo{
			float: left;
			height: 2rem;
		}
		.body-top .top-content .logo img{
			width: 80%;
			margin-top: 0.1rem;
		}
		.body-top .top-content .menu-list{
			float: right;
			overflow: hidden;
			margin-top: 0.4rem;
		}
		.body-top .top-content .menu-list ul li{
			float: left;
			line-height: 0.6rem;
			font-size: 0.6rem;
			color: #9b9b9b;
			margin-right: 0.5rem;
			border-right: 2px solid #a9a9a9;
			padding-right: 0.5rem;
			cursor: pointer;
		}
		.body-top .top-content .menu-list ul li:last-child{
			margin-right: 0;
			border-right: 0;
		}
		header{
			height: 100%;
			padding: 1.5rem 0;
		}
		header .pb-tit-num{
			font-size: 4rem;
			line-height: 4rem;
		}
		header .pb-tit-lv{
			font-size: 0.9rem;
		}
		header .right_cont{
			margin-top: 2.5rem;
		}
		.body-main{
			max-width: 1000px;
			margin: 0 auto;
		}
		.pb-content{
			margin-bottom: 1rem;
			background: #fff;
		}
		.pb-content .pb-line-chart{
			border-bottom: 0;
		}
		.pb-content .pb-zhibiao-legend{
			border-top: none;
		}
	    .diyicon{
	        position: absolute;
	        border-radius: 15%;
	        border: 1px solid rgba(255,255,255,0.5);
	        color: #ffffff;
	        -moz-user-select: none;
	        font-size: 12px;
	        font-weight: bolder;
	        box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	        width: 30px;
	        height: 20px;
	        text-align: center;
	        text-shadow: 2px 2px 2px 3px rgba(0,0,0,0.5);
			padding: 2px;
			display: table;
			background-color: RGBA(209, 209, 209, 0.5);
	    }
		.diyicon .arrow{
			width:0; 
			height:0; 
			border-left:6px solid transparent;
			border-right:6px solid transparent;
			border-top:6px solid RGBA(150, 150, 150, 0.5);
			position: absolute;
			top:100%;
			left:50%;
			margin-left: -5px;
		}
		.diyicon .cont{
			/*background-color: RGBA(209, 209, 209, 0.5);*/
			display: block;
			width: 100%;
			height: 100%;
	        border-radius: 15%;
			display:table-cell;
			vertical-align: middle;
		}
		.pb-layout{
			width: 170px;
		    margin: 10px auto 0;
		    border-radius: 10px;
		    padding-bottom: 7px;
		}
		.pb-content .pb-map-chart{
			height: 400px;
		}
		.pb-content .pb-zhibiao-legend{
			width: 55%;
   	 		margin: 1rem auto 0.5rem;
		}
		.pb-zhibiao-legend .zb-item{
			margin: 0 0.3rem;
		}
		.pb-content .pb-line-chart{
			width: 95%;
			margin: 0.8rem auto;
		}
	</style>
</head>
<body>
	<div class="body-top">
		<div class="top-content">
			<div class="logo"><img src="assets/img/logo.png"></div>
			<div class="menu-list">
				<ul>
					<li id="currentDate"></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="body-main">
		<header>
			<div class="left_cont">
				<p class="pb-title">空气质量指数</p>
				<div class="pb-layout">
					<p class="pb-tit-num">-</p>
					<p class="pb-tit-lv">-</p>
				</div>
			</div>
			<div class="right_cont">
				<p class="pb-weather">-</p>
				<p class="pb-wind">-</p>
			</div>
		</header>
		
		<div class="pb-content">
			
			<div class="pb-map-chart" style="border-bottom:2px solid #eeeeee;position: relative;">
				<div id="allmap" style="height: 400px;"></div>
				<span style="display:none;" id="loclbtn" class="loclbtn" onclick="localToPoint()"><i><b></b></i><span class="iv"></span><span class="ih"></span></span>
			</div>
			
			<div class="pb-score-list" style="display:none;">
				<span class="pb-sc-con">
					<i class="iconfont icon-liuliangxinxishangbao pb-small"></i>
					<span class="pb-twhite">空气质量排名:</span>
					<i class="iconfont icon-gongsi"></i>
					<span class="pb-tgrey">省内第<b id='js-order-val'>-</b>名</span>
					<i class="iconfont icon-gongsi"></i>
					<span class="pb-tgrey">全国74城市第<b id='csj-order-val'>-</b>名</span>
				</span>
			</div>
			
			
			<h1 class="h_tit">今日空气质量及污染物趋势</h1>
			<div class="pb-zhibiao-legend flex-row">
			    <span class="active flex-row-item zb-item color-aqi">AQI</span>
				<span class="flex-row-item zb-item color-pm25">PM<sub>2.5</sub></span>
				<span class="flex-row-item zb-item color-so2">SO<sub>2</sub></span>
				<span class="flex-row-item zb-item color-no2">NO<sub>2</sub></span>
				<span class="flex-row-item zb-item color-pm10">PM<sub>10</sub></span>
				<span class="flex-row-item zb-item color-co">CO</span>
				<span class="flex-row-item zb-item color-o3">O<sub>3</sub></span>
			</div>
			<div class="pb-line-chart" id="aqi-chart"></div>
		</div>
	</div>
	
</body>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/touch.min.js"></script>
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/function_public.js"></script>
<script src="assets/js/layer.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EO5oHjEfgBz7QieWfqG08jcx"></script>
<script>
function getCurDate(){
	 var d = new Date();
	 var week;
	 switch (d.getDay()){
	 case 1: week="星期一"; break;
	 case 2: week="星期二"; break;
	 case 3: week="星期三"; break;
	 case 4: week="星期四"; break;
	 case 5: week="星期五"; break;
	 case 6: week="星期六"; break;
	 default: week="星期天";
	 }
	 var years = d.getFullYear();
	 var month = add_zero(d.getMonth()+1);
	 var days = add_zero(d.getDate());
	 var hours = add_zero(d.getHours());
	 var ndate = years+"年"+month+"月"+days+"日" +"&nbsp;&nbsp;&nbsp;"+week;
	 currentDate.innerHTML= ndate;
}

function add_zero(temp){
	 if(temp<10) return "0"+temp;
	 else return temp;
}

setInterval("getCurDate()",100);
</script>
<script>
/*请求地址全局变量*/
// var RequestUrl = '.';
var RequestUrl = 'http://58.213.141.220:8989/njhbindex';
var tapidx=0;
var AQIChartCache={};

/*----------------start------------------*/
//天气预报
findWeather(RequestUrl+'/weather');

//首要污染物
getJSONData(RequestUrl+"/data?act=aqin&areacode=2000",function(data){
	if(data.Error==null){
		var aqidata=data.Data;
		aqidata.forEach(function(e,i){
			$('.pb-tit-wuran span.pb-wr-zb').html(getAQIItemByCode(e.first));
			$('#rt-aqi-pm25').text(parseInt(e.pm25)).css({'color':parseInt(e.ipm25)>50&&parseInt(e.ipm25)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.ipm25))});
			$('#rt-aqi-pm10').text(parseInt(e.pm10)).css({'color':parseInt(e.ipm10)>50&&parseInt(e.ipm10)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.ipm10))});
			$('#rt-aqi-no2').text(parseInt(e.no2)).css({'color':parseInt(e.ino2)>50&&parseInt(e.ino2)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.ino2))});
			$('#rt-aqi-so2').text(parseInt(e.so2)).css({'color':parseInt(e.iso2)>50&&parseInt(e.iso2)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.iso2))});
			$('#rt-aqi-co').text(parseFloat(e.co)).css({'color':parseInt(e.ico)>50&&parseInt(e.ico)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.ico))});
			$('#rt-aqi-o3').text(parseInt(e.o3)).css({'color':parseInt(e.io3)>50&&parseInt(e.io3)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.io3))});
			$('.pb-tit-num').text(e.aqi);
			$('.pb-tit-lv').text(e.note);
			$('.pb-tiptxt span').eq(num2table(e.aqi).idx).css({'display':'inline-block'});
			setHeaderStyle(e.aqi);
			if(e.first==null){
				$('.pb-tit-wuran').css('display','none');
			}
		});
	}else{
		console.log(data.Error);
	}
});

function setHeaderStyle(aqi){
	var infobox={
				'background-color':'rgba(255,255,255,0.5)'
			},
			aqibox={
				color:num2color(parseInt(aqi)),
				'text-shadow':'-1px 1px 0px rgba(0,0,0,0.1)',
				'background-color':'rgba(0,0,0,0.1)'
			},
			djbox={
				color:'#ffffff',
			},
			css={};

	css['background-color']=num2color(parseInt(aqi));
	css['color']='#7A469D';
	css['background-image']='url(./assets/img/backg'+(num2table(parseInt(aqi)).idx+1)+'.png)';

	if(aqi<51){
		aqibox['background-color']='rgba(255,255,255,0.15)';
		infobox['background-color']='rgba(0,0,0,0.15)';
		css['color']='#ffffff';
		css['text-shadow']='-1px 1px 0px rgba(0,0,0,0.1)';
	}else if(aqi>=51&&aqi<101){
		djbox={color:'#7A469D'};
		infobox['background-color']='rgba(0,0,0,0.0)';
	}else if(aqi>=101&&aqi<151){
		djbox={color:'#ffffff'};
		css['color']='#ffffff';
		infobox['background-color']='rgba(0,0,0,0.0)';
		infobox['color']='#eeeeee';
	}else if(aqi>=151&&aqi<201){
		djbox={color:'#ffffff'};
		css['color']='#eeeeee';
		infobox['background-color']='rgba(0,0,0,0.0)';
	}else if(aqi>=201&&aqi<301){
		djbox={color:'#ffffff'};
		css['color']='#eeeeee';
		infobox['background-color']='rgba(0,0,0,0.0)';
	}else if(aqi>=301){
		djbox={color:'#ffffff'};
		css['color']='#eeeeee';
		infobox['background-color']='rgba(0,0,0,0.0)';
	}

	$('.pb-tit-wuran').css(djbox);
	$('.pb-layout').css(aqibox);
	$('.infobox').css(infobox);
	$('header').css(css);
}

//排名
get_citys_order();


AQIChange(RequestUrl+'/data?act=aqih&areacode=2000',0);
// AQIChange(RequestUrl+'/data?act=aqid&areacode=2000',1);
	
touch.on('.aqi-chart-time', 'tap', function(ev){
	tapidx=ev.target.getAttribute('data-idx');
	$('.aqi-chart-time').removeClass('active').eq(tapidx).addClass('active');
	//change chart
	var cd=AQIChartCache[tapidx];
	AQIChart(cd.time,cd.aqi,cd.pm,cd.so,cd.no,cd.pm2,cd.co,cd.o);
});

$(document).on('click','.zb-item',function(){
	var disable=$(this).hasClass('active');
	if(disable==true){
		$(this).removeClass('active');
	}else{
		$(this).addClass('active');
	}
	var cd=AQIChartCache[tapidx];
	AQIChart(cd.time,cd.aqi,cd.pm,cd.so,cd.no,cd.pm2,cd.co,cd.o);
});

/*----------------end------------------*/
var host=RequestUrl;
var geocoords={
		'市区':[118.78,32.04],
		'草场门':[118.754582,32.05529],
		'中华门':[118.775235,32.002362],
		'瑞金路':[118.812434,32.031725],
		'玄武湖':[118.798074,32.075852],
		'山西路':[118.774462,32.070624],
		'迈皋桥':[118.80807,32.106597],
		'仙林大学城':[118.91689,32.113268],
		'奥体中心':[118.741109,32.00713],
		'浦口':[118.643734,32.073008],
		'江宁彩虹桥':[118.83103301970846,31.9280910197085],
		'高淳淳溪':[118.890583,31.3294],
		'六合雄州':[118.839798,32.359663],
		'溧水永阳':[119.019125,31.648064],
		'江北化工园':[118.811028, 32.260928],
		'将军大道':[118.831033, 31.928091]
	};
var areas={
	2000:['市区','市区','nj'],
	2001:['草场门','鼓楼区','glq',[119.995278, 31.758333]],
	2002:['中华门','雨花台区','yhtq',[119.933056, 31.778611]],
	2003:['瑞金路','秦淮区','qhq',[119.961944, 31.808889]],
	2004:['玄武湖','玄武区','xwq',[119.935, 31.703889]],
	2006:['山西路','鼓楼区','glq',[119.904722, 31.910833]],
	2007:['迈皋桥','栖霞区','xxq',[120.039167, 31.763611]],
	2008:['仙林大学城','栖霞区','xxq',[119.455833, 31.4]],
	2009:['奥体中心','建邺区','jyq',[119.474722, 31.400833]],
	2010:['浦口','浦口区','pkq',[119.448056, 31.307778]],
	2011:['江北化工园','六合区','lhq',[118.811028, 32.260928]],
	2013:['高淳淳溪','高淳区','gcq',[118.890583, 31.3294]], //区
	2016:['江宁彩虹桥','江宁区','jnq',[118.831033, 31.928091]],//区
	2018:['将军大道','江宁区','jnq',[118.831033, 31.928091]],
	2022:['六合雄州','六合区','lhq',[118.839798, 32.359663]],//区
	2024:['溧水永阳','溧水区','lsq',[119.019125, 31.648064]]//区
};
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(118.78,32.04);
map.centerAndZoom(point, 12);

var URL = 'http://58.213.141.220:8989/njhbindex';//'http://61.155.85.77:8999';


function getAQI(aqi){
	var num=parseInt(aqi);
	if(isNaN(num)) return null;
	return num
}
var mk=null,circles={};
function localToPoint(){
	//定位
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var ps=moveTo(r.point.lng,r.point.lat);
			r.point.lng=ps[0];
			r.point.lat=ps[1];
			if(mk!=null) map.removeOverlay(mk);
			if(ps[2]==false){
				var myIcon = new BMap.Icon("./assets/img/mr.png", new BMap.Size(36,38));
				mk = new BMap.Marker(r.point,{icon:myIcon});
				map.addOverlay(mk);
			}
			map.panTo(r.point);		
		}
		else {
			console.log('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true});
}
function addCircle(id,point,color){
    circles[id]= new BMap.Circle(point,500,{fillColor:color, strokeWeight: 0 ,fillOpacity: 1, strokeOpacity: 0});
    map.addOverlay(circles[id]);
}
var myPoint={lon:118.783941,lat:32.041631};
function moveTo(longitude, latitude) {
	var out=false;
	// 在南京外面的定位  强制拉到新街口
   if (longitude < 118.48158925991368 ||
   		 longitude > 119.14076894741368 ||
		    latitude > 32.20241194404216 ||
		     latitude < 31.924552839077077) {
       longitude = 118.783941;
       latitude = 32.041631;
	   out=true;
	   alert('你的地理位置已经超出南京市范围, 地图将定位到南京新街口！');
   }
   if(out==false){
        var point=new BMap.Point(longitude,latitude);
        if(mk!=null) map.removeOverlay(mk);
        var myIcon = new BMap.Icon("./assets/img/mr.png", new BMap.Size(36,38));
		mk = new BMap.Marker(point,{icon:myIcon});
		map.addOverlay(mk);
        map.panTo(point);
   }
   myPoint={
	  lon:longitude
	  ,lat:latitude
   }
   return [longitude,latitude,out]
}

function num2color(num){
	var num=parseInt(num),alpha=0.95;
	var color='rgba(0,228,0,'+alpha+')';
	if(num<=50){
		color='rgba(0,228,0,'+alpha+')';
	}else if(50<num&&num<=100){
		color='rgba(255,255,0,'+alpha+')';
	}else if(100<num&&num<=150){
		color='rgba(255,126,0,'+alpha+')';
	}else if(150<num&&num<=200){
		color='rgba(255,0,0,'+alpha+')';
	}else if(200<num&&num<=300){
		color='rgba(153,0,76,'+alpha+')';
	}else if(num>300){
		color='rgba(126,0,35,'+alpha+')';
	}
	return color
}
function num2table(num){
	var num=parseInt(num);
	var idx=0,note='';
	if(num<=50){
		idx=0;
		note='优秀';
	}else if(50<num&&num<=100){
		idx=1;
		note='良好';
	}else if(100<num&&num<=150){
		idx=2;
		note='轻度污染';
	}else if(150<num&&num<=200){
		idx=3;
		note='中度污染';
	}else if(200<num&&num<=300){
		idx=4;
		note='重度污染';
	}else if(num>300){
		idx=5;
		note='严重污染';
	}
	return {idx:idx,note:note}
}
// 南京监测点
getJSONData(host+"/data?act=aqiarean",function(data){
	if(data.Error==null){
		var d=data.Data;
		for(var i in d){
			if(i==2018||i==2011||i==2000) continue;
			var name=areas[i][0];
			var point=new BMap.Point(geocoords[name][0],geocoords[name][1])
				,color=num2color(d[i].aqi);
			var myCompOverlay = new ComplexCustomOverlay(i, point, d[i].aqi, color);
			map.addOverlay(myCompOverlay);
		}
	}
});
// 复杂的自定义覆盖物
function ComplexCustomOverlay(id,point, aqi, color){
	this._id=id;
	this._point = point;
	this._text = aqi;
	this._color=color;
	this._overText = areas[id][0]+' AQI: '+aqi+' ('+num2table(aqi).note+')';
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
	var that = this;
	this._map = map;
	var bgcolor=this._color;//this._text>50&&this._text<=100?'#7A469D':'#ffffff';
	var div = this._div = document.createElement("div");
	div.setAttribute('class','diyicon');
	div.style.position = "absolute";
	div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
	div.style.color = this._text>50&&this._text<=100?'#7A469D':'#ffffff';;
	div.style.border='0 solid #ccc';
	div.style.backgroundColor=bgcolor;
	
	var span = this._span = document.createElement("span");
	span.setAttribute('class','cont');
	// span.style.backgroundColor = this._text<=150?'RGBA(0, 0, 0, 0.1)':'rgba(255,255,255,0.5)';
	div.appendChild(span);
	span.appendChild(document.createTextNode(this._text));

	var arrow = document.createElement("span");
	arrow.setAttribute('class','arrow');
	arrow.style.borderTopColor=bgcolor;
	div.appendChild(arrow);
	
	div.addEventListener('click',function(){
		var opts = {
		width : 0,     // 信息窗口宽度
		height: 0,     // 信息窗口高度
		title : "空气质量" , // 信息窗口标题
		enableMessage:true//设置允许信息窗发送短息
		}
		var infoWindow = new BMap.InfoWindow(that._overText, opts);
		map.openInfoWindow(infoWindow,that._point); //开启信息窗口
	//   this.getElementsByTagName("span")[0].innerHTML = that._overText;
	},false);

	map.getPanes().labelPane.appendChild(div);
	
	return div;
}
ComplexCustomOverlay.prototype.draw = function(){
	var map = this._map;
	var pixel = map.pointToOverlayPixel(this._point);
	this._div.style.left = pixel.x-15 + "px";
	this._div.style.top  = pixel.y - 30 + "px";
}
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' style='display:none;' id='cnzz_stat_icon_1259663969'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259663969' type='text/javascript'%3E%3C/script%3E"));</script>
</html>